<template>
    <div class="sub-category">
        <div class="container">
            <!-- 面包屑 -->
            <SubBread />
            <!-- 筛选区 -->
            <SubFilter @filter-change="changeFilter" />
            <!-- 结果区域 -->
            <div class="goods-list">
                <!-- 排序 -->
                <SubSort  @filter-change="changeSort" />
                <!-- 列表 -->
                <ul>
                    <li v-for="item in goodslist" :key="item.id">
                        <GoodsItem :goods="item" />
                    </li>
                </ul>
                <!-- 加载 -->
                <CsInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
            </div>
        </div>
    </div>
</template>
<script>
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'
import {ref,watch} from 'vue'
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
export default {
    name: 'SubCategory',
    components: { SubBread,SubFilter,SubSort,GoodsItem },
    setup() {
        // 1.基础布局
        // 2.无限加载组件
        // 3.动态加载数据且渲染
        // 4.任何筛选条件变化需要更新列表
        const route = useRoute()
        // 加载中
        const loading = ref(false)
        // 是否加载完毕
        const finished = ref(false)
        // 商品列表数据
        const goodslist = ref([])

        // 请求参数
        let reqParams = {
            page:1,
            pageSize:20
        }

        // 获取数据函数
        const getData = () => {
            loading.value = true
            // 设置二级分类的ID
            reqParams.categoryId = route.params.id
            findSubCategoryGoods(reqParams).then(({ result }) => {
                // 获取数据成功
                if(result.items.length) {
                    // 有数据就追加数据
                    goodslist.value.push(...result.items)
                    // 把page改成下一页页码
                    reqParams.page++
                } else {
                    // 没有数据，代表加载完成
                    finished.value = true
                }
                    // 请求借书
                    loading.value = false
            })
        }

        //切换二级分类重新加载
        watch(() => route.params.id, (newVal) => {
            if (newVal && route.path === ('/category/sub/' + newVal)) {
                goodsList.value = [] // 导致列表空的，加载更多组件顶上来，进入可视区，区加载数据
                reqParams = {
                page: 1,
                pageSize: 20
                }
                finished.value = false
            }
        })

        // 监听筛选区改变
        const changeFilter = (filterParams) => {
            reqParams = { ...reqParams,...filterParams }
            reqParams.page = 1
            goodslist.value = []
            finished.value = false
        }

        // 监听排序改变
        const changeSort = (sortParams) => {
            reqParams = { ...reqParams,...sortParams }
            reqParams.page = 1
            goodslist.value = []
            finished.value = false
        }

        return { loading,finished,goodslist,getData,changeFilter, changeSort }
    }
}
</script>
<style scoped lang="less">
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
    ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>